<template>
  <d2-container>
    <el-main>

      <el-form ref="departmentForm" :model="departmentForm" label-width="80px" label-position="left"
               :rules="formRules">

        <el-form-item label="部门名称" prop="name">
          <el-input placeholder="请输入与部门名称" v-model="departmentForm.name" :disabled="disabled"></el-input>
        </el-form-item>


        <el-form-item label="部门描述" prop="description">
          <el-input placeholder="请输入部门描述" v-model="departmentForm.description" :disabled="disabled"></el-input>
        </el-form-item>


        <el-form-item label="所属校区" prop="school">
          <el-select
                  v-model="departmentForm.school"
                  filterable
                  :disabled="disabled"
          >
            <el-option v-for="item in schoolList" :key="item._id" :label="item.name" :value="item._id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </el-main>
    <el-footer style="text-align: center">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="resetForm('departmentForm')">重置</el-button>
      <el-button @click="edit" v-show="editShow">修改</el-button>
    </el-footer>
  </d2-container>
</template>

<script>
// import { request } from "http";
import request from "@/plugin/axios";
import { constants } from "crypto";
import {mapState} from "vuex";

export default {
  data() {
    return {
      formRules: {
        name: [
          {required: true, message: '请输入部门', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
       
        school: [
          {required: true, message: '请选择所在校区', trigger: 'change'}
        ]


      },

      departmentForm:{
        school:undefined,
        name:undefined,
        description: undefined,
      },
      editShow: false,
      disabled: false,
      schoolList:[],

    };
  },
  computed: {
    ...mapState('d2admin/user', ['info']),
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit() {
      let data = {};
      data.name = this.departmentForm.name
      data.school = this.departmentForm.school
      let url = "/department/addDepartment";
      data.description = this.departmentForm.description
      request({
        url: url,
        method: "post",
        data
      }).then(res => {
        if (res.code == 200) {
          this.refresh = true
          this.departmentForm = {
        school:undefined,
        name:undefined,
        description: undefined,
      }
          this.$router.push({path: "/department-list"})
          this.$alert("", "提交成功", {
            confirmButtonText: "确定"
          });
        }
        // 返回数据
      });
    },
    edit() {
      this.disabled = false;
    },
    getSchoolList() {
      this.schoolList = this.info.school;

      this.departmentForm.school = this.schoolList[0]._id;
      //零时修正
      if (this.info.role.indexOf('root') > -1) {
        this.departmentForm.school = this.schoolList[1]._id;
      }

    },
  },

                    beforeRouteLeave(to,from,next){
        if (this.refresh){
          to.meta.refresh = 'a'
          this.refresh = undefined
        }
        if (this.$route.query.id == undefined){
            from.meta.keep = true
            from.meta.departmentForm = this.departmentForm
        }

        next()
        },
        beforeRouteEnter(to,from,next){
            if (to.meta.keep){
                to.meta.keep = undefined
                next(v=>{
                  v.departmentForm = to.meta.departmentForm
                  to.meta.departmentForm = undefined
                })
            }
            else{
                next()
            }

        },

  created() {
    if (this.$route.query.id != undefined) {
      this.editShow = true;
      this.disabled = true;
    }
    this.getSchoolList();
  }
};
</script>
